<template>
  <div id="search_list">
    <div class="rec">搜索结果</div>
    <div class="list_content">
      <ul class="song_list">
        <li v-for="(item, index) in nameList" :key="index" @click="play(hashList[index], nameList[index])">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SearchList',
    data () {
      return {
        hashList: [],
        nameList: []
      }
    },
    methods: {
      play: function (arg, arg2) {
        this.$store.commit('change', arg)
        this.$store.commit('add', arg)
        this.$store.commit('addName', arg2)
        this.$root.eventHub.$emit('click', event.target)
      }
    },
    created: function () {
      let that = this
      this.$root.eventHub.$on('search', (arg) => {
        let keyword = arg
        let searchUrl = `/search/api/v3/search/song?format=json&keyword=${keyword}&page=1&pagesize=10&showtype=1`
        this.$ajax.get(searchUrl).then((res) => {
          if (res.status !== 200) {
            console.error('搜索歌曲失败')
          } else {
            let data = res.data.data.info
            let arrHash = []
            let arrName = []
            for (var i = 0, len = data.length; i < len; i++) {
              arrHash.push(data[i].hash)
              arrName.push(data[i].filename)
            }
            that.nameList = arrName
            that.hashList = arrHash
          }
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/scss/mixin";
  #search_list {
    width: 100%;
    .rec {
      width: 30%;
      height: pxTorem(30);
      background-color: darkseagreen;
      border-radius: 30px;
      text-align: center;
      line-height: pxTorem(30);
      margin: pxTorem(15) auto pxTorem(15) auto;
    }
    .list_content {
      width: 100%;
      display: flex;
      border-top: 1px solid #eee;
      .song_list {
        padding: 0 pxTorem(10) 0 pxTorem(10);
        width: 100%;
        overflow: hidden;
        li {
          border-bottom: 1px solid #ccc;
          height: pxTorem(45);
          line-height: pxTorem(45);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
